import { defineComponent, ref } from "vue";
import VChart from "vue-echarts";
import { use } from "echarts/core";
import { HeatmapChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  VisualMapComponent,
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
import "./PopulationHeatmap.css";

use([
  HeatmapChart,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  VisualMapComponent,
  CanvasRenderer,
]);

export default defineComponent({
  name: "PopulationHeatmap",
  components: {
    VChart,
  },
  setup() {
    // 生成热力图数据
    const generateHeatmapData = () => {
      const data: [number, number, number][] = [];
      const hours = ["00", "04", "08", "12", "16", "20"];
      const districts = ["商业区", "居民区", "工业区", "科技园", "文化区"];

      hours.forEach((hour, i) => {
        districts.forEach((district, j) => {
          let value = 0;
          if (hour === "08" || hour === "12" || hour === "16") {
            // 白天人流量大
            value = Math.floor(Math.random() * 3000 + 2000);
          } else {
            // 夜间人流量小
            value = Math.floor(Math.random() * 1000 + 500);
          }
          // 商业区人流量额外增加
          if (j === 0) value += 1000;
          data.push([i, j, value]);
        });
      });
      return data;
    };

    const chartOption = ref({
      tooltip: {
        position: "top",
        backgroundColor: "rgba(0, 0, 0, 0.8)",
        borderColor: "#00d4ff",
        borderWidth: 1,
        textStyle: {
          color: "#fff",
        },
        formatter: (params: any) => {
          const hours = ["00:00", "04:00", "08:00", "12:00", "16:00", "20:00"];
          const districts = ["商业区", "居民区", "工业区", "科技园", "文化区"];
          return `${hours[params.data[0]]} - ${districts[params.data[1]]}<br/>人流量: ${params.data[2]}`;
        },
      },
      grid: {
        left: "15%",
        right: "10%",
        bottom: "15%",
        top: "10%",
      },
      xAxis: {
        type: "category",
        data: ["00:00", "04:00", "08:00", "12:00", "16:00", "20:00"],
        splitArea: {
          show: true,
        },
        axisLine: {
          lineStyle: {
            color: "rgba(0, 212, 255, 0.3)",
          },
        },
        axisLabel: {
          color: "#fff",
        },
      },
      yAxis: {
        type: "category",
        data: ["商业区", "居民区", "工业区", "科技园", "文化区"],
        splitArea: {
          show: true,
        },
        axisLine: {
          lineStyle: {
            color: "rgba(0, 212, 255, 0.3)",
          },
        },
        axisLabel: {
          color: "#fff",
        },
      },
      visualMap: {
        min: 0,
        max: 5000,
        calculable: true,
        orient: "horizontal",
        left: "center",
        bottom: "0%",
        textStyle: {
          color: "#fff",
        },
        inRange: {
          color: ["#001866", "#0088ff", "#00d4ff", "#00ff88", "#ffd700"],
        },
      },
      series: [
        {
          name: "人口热力",
          type: "heatmap",
          data: generateHeatmapData(),
          label: {
            show: true,
            color: "#fff",
            fontSize: 10,
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowColor: "rgba(0, 212, 255, 0.8)",
            },
          },
        },
      ],
    });

    return () => (
      <div class="population-heatmap">
        <div class="population-heatmap__header">
          <h3 class="population-heatmap__title">人口分布热力图</h3>
        </div>
        <div class="population-heatmap__chart">
          <VChart option={chartOption.value} autoresize style="height: 100%; width: 100%;" />
        </div>
      </div>
    );
  },
});
